<template>
	<u-popup v-model="showPop" mode="bottom" border-radius="14" :closeable="true" @close="onClose" :safe-area-inset-bottom="true">
		<view class="bg-white spec-contain">
			<view class="spec-header row">
				<custom-image class="goods-img mr20" radius="10rpx" @tap="previewImage(checkedGoods.image)" :src="checkedGoods.image"></custom-image>
				<view class="goods-info" v-if="!isBargain">
					<view class="primary row">
						<price-format :first-size="46" :second-size="32" :subscript-size="32" :price="group ? checkedGoods.team_price : checkedGoods.price" :weight="500"></price-format>
						<view class="vip-price row" v-if="!group && !isSeckill && checkedGoods.member_price">
							<view class="price-name xxs">会员价</view>
							<view style="padding: 0 11rpx"> 
								<price-format :price="checkedGoods.member_price" :first-size="22" :second-size="22" :subscript-size="22"
									 :weight="500" color="#7B3200"></price-format>
							</view>
						</view>
					</view>
					<view class="sm" v-show="showStock">
						库存：{{checkedGoods.stock}}件
					</view>
					<view class="sm">
						<!-- <text>已选择：{{checkedGoods.spec_value_str}}，{{goodsNum}}件</text> -->
						<text>{{specValueText}}</text>
					</view>
				</view>
                <view class="goods-info" v-else>
                    <view class="xs">
                        最低可砍至<text class="sm" style="color: #F95F2F;">¥{{checkedGoods.activity_price}}</text>
                    </view>
                    <view class="muted xs mt10">
                        原价 ¥{{checkedGoods.price}}
                    </view>
                    <view class="sm lighter mt20">
                    	<!-- <text>已选择：{{checkedGoods.spec_value_str}}</text> -->
						<text>{{specValueText}}</text>
                    </view>
                </view>
			</view>
			<view class="spec-main">
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="spec-list">
						<view v-for="(item, index) in specList" :key="index" class="spec">
							<view class="name mb20">
							{{ item.name }}
							<text
							    class="primary xs ml20">{{checkedGoods.spec_value_ids_arr[index] == '' ? '请选择'+item.name:''}}</text>
							</view>
							<view class="row wrap">
								<!-- <view v-for="(specitem, index2) in item.spec_value" :key="index2" :class="'spec-item sm ' + ( specitem.checked ? 'checked' : '' )"
								 @tap="choseSpecItem(item.id, specitem.id)">
									{{ specitem.value }}
								</view> -->
								<view v-for="(specitem, index2) in item.spec_value" :key="index2" :class="'spec-item sm ' +
								    ( checkedGoods.spec_value_ids_arr[index] == specitem.id ? 'checked' : '' ) + 
								    ( isDisable(specitem.id) ? 'disabled':'')" @click="choseSpecItem(index, index2)">
								    {{ specitem.value }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="good-num row-between ml20 mr20">
					<view class="label">数量</view>
					<u-number-box v-model="goodsNum" :min="1" :max="checkedGoods.stock" :disabled="disabledNumberBox"></u-number-box>
				</view>
			</view>
			<view class="btns row-between bg-white" :class="specValueText.indexOf('请选择') != -1 || checkedGoods.stock == 0 ? 'disabled':''">
				<button v-if="showAdd" class="add-cart br60 white btn" size="lg" @tap="onClick('addcart')">{{yellowBtnText}}</button>
				<button v-if="showBuy" class="bg-primary br60 white btn" size="lg" @tap="onClick('buynow')">{{redBtnText}}</button>
				<button v-if="showConfirm" class="bg-primary br60 white btn" size="lg" @tap="onClick('confirm')">确定</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				checkedGoods: {
				    stock: 0
				}, //选中的
				outOfStock: [], //缺货的
				specList: [], //规格
				disable: [], //不可选择的
				goodsNum: 1,
				showPop: false
			};
		},

		components: {},
		props: {
			show: {
				type: Boolean
			},
			goods: {
				type: Object
			},
			showAdd: {
				type: Boolean,
				default: true
			},
			showBuy: {
				type: Boolean,
				default: true
			},
			showConfirm: {
				type: Boolean,
				default: false
			},
			redBtnText: {
				type: String,
				default: "立即购买"
			},
			yellowBtnText: {
				type: String,
				default: "加入购物车"
			},
			group: {
				type: Boolean,
				default: false
			},
			isSeckill: {
				type: Boolean,
				default: false
			},
            showStock: {
                type: Boolean,
                default: true
            },
            disabledNumberBox: {
                type: Boolean,
                default: false
            },
            isBargain: {
                type: Boolean,
                default: false
            },
			goodsType: {
				type: Number,
			}
		},
		mounted() {},
		
		computed: {
		    // 选择的规格参数等
		    specValueText() {
		        let arr = this.checkedGoods.spec_value_ids?.split(',');
		        let spec_str = ''
		        if (arr)
		            arr.forEach((item, index) => {
		                if (item == '') spec_str += this.specList[index].name + ','
		            })
		        if (this.checkedGoods?.stock != 0 && spec_str == '')
		            return `已选择 ${this.checkedGoods.spec_value_str} ${this.goodsNum} 件`
		        else
		            return `请选择 ${spec_str.slice(0, spec_str.length - 1)}`
		    }
		},
		
		watch: {
		    goods(value) {
		        this.specList = value.goods_spec || [];
		        let goodsItem = value.goods_item || [];
		        this.outOfStock = goodsItem.filter(item => item.stock == 0)
		        // 找出库存不为0的
		        const resultArr = goodsItem.filter(item => item.stock != 0)
		        if (resultArr.length != 0) {
		            resultArr[0].spec_value_ids_arr = resultArr[0].spec_value_ids.split(',');
		            this.checkedGoods = resultArr[0]
		        } else {
		            // 无法选择
					goodsItem[0].spec_value_ids_arr = []
					
		            this.disable = goodsItem.map(item => item.spec_value_ids.split(','));
		            this.checkedGoods = goodsItem[0]
		        }
		    },
		
		    specList(value) {
		        if (this.checkedGoods.stock == 0) return
		
		        const res = this.goods.goods_item.filter(item => {
		            return this.checkedGoods.spec_value_ids === item.spec_value_ids
		        })
		
		        // 库存为0的规格
		        const idsArr = this.checkedGoods.spec_value_ids_arr;
		        const outOfStock = this.outOfStock;
		        // 找出规格相同和规格不相同的余数
		        const getArrGather = this.getArrResult(idsArr, outOfStock);
		        // 计算出缺货的规格项
		        this.disable = this.getOutOfStockArr(getArrGather, idsArr)
		
		        if (res.length != 0) {
		            let result = JSON.parse(JSON.stringify(res[0]))
		            result.spec_value_ids_arr = result.spec_value_ids.split(',')
		            this.checkedGoods = result;
		            // 同步到父组件
		            this.$emit('change', {
		                detail: this.checkedGoods
		            });
		        }
		    },
		
		    show(val) {
		        this.showPop = val
		    }
		
		},
		created() {
		    console.log('spec')
		},
		methods: {
		    isDisable(e) {
		        const res = this.disable.filter(item => item == e)
		        if (res.length != 0) return true
		        else return false
		    },
		
		    onClose() {
		        this.$emit('close')
		    },
		
		    onClick(type) {
		        let {
		            checkedGoods,
		            goodsNum
		        } = this;
		        if(this.specValueText.indexOf('请选择') != -1) return this.$toast({
		            title: this.specValueText
		        })
		        if(checkedGoods.stock == 0) return this.$toast({
		            title: '当前选择库存不足'
		        })
		        checkedGoods.goodsNum = goodsNum;
		        this.$emit(type, {
		            detail: checkedGoods
		        });
		    },
		
		    // 选择规格
		    choseSpecItem(index, index2) {
		        const id = this.specList[index].spec_value[index2].id;
		
		        // 无法选择
		        const disable = this.disable.filter(item => item == id)
		        if (disable.length != 0) return
		
		        let idsArr = this.checkedGoods.spec_value_ids_arr;
		        if (id == idsArr[index]) idsArr[index] = ''
		        else idsArr[index] = id;
		        //保存已选规格
		        this.checkedGoods.spec_value_ids_arr = idsArr;
		        this.checkedGoods.spec_value_ids = idsArr.join(',');
		        // 重新渲染页面
		        this.specList = [...this.specList]
		    },
		
		    // 过滤出需要进行禁用的规格
		    getOutOfStockArr(arr, arr1, result = []) {
		        arr.forEach(el => {
		            if (el.num >= (arr1.length - 1)) {
		                result.push(...el.different)
		            }
		        })
		        return result
		    },
		
		    // 匹配出缺货库存和已选中对比结果
		    getArrIdentical(arr1, arr2, arr = [], num = 0) {
		        arr1.forEach(el => {
		            arr2.forEach(el2 => {
		                if (el == el2) {
		                    num += 1;
		                    arr.push(el)
		                }
		            })
		        });
		        return {
		            num, //n个相同的
		            different: this.getArrDifference([...new Set(arr)].map(Number), arr2.map(Number)),
		            identical: [...new Set(arr)]
		        }
		    },
		
		    // 匹配出已选择和缺库存的
		    getArrResult(arr, outOfStock, result = []) {
		        outOfStock.forEach(item => {
		            const res = this.getArrIdentical(arr, item.spec_value_ids.split(','))
		            if (res != undefined && res.length != 0) {
		                result.push(res)
		            }
		        })
		        return result
		    },
		
		    // 找出两个数组中参数不同的
		    getArrDifference(arr1, arr2) {
		        return arr1.concat(arr2).filter(function(v, i, arr) {
		            return arr.indexOf(v) == arr.lastIndexOf(v);
		        });
		    },
		
		    // 查看商品图片
		    previewImage(current) {
		        uni.previewImage({
		            current,
		            urls: [current] // 需要预览的图片http链接列表
		
		        });
		    }
		
		}
	};
</script>
<style lang="scss" scoped>
	.spec-contain {
		border-radius: 10rpx 10rpx 0 0;
		overflow: hidden;
		position: relative;

		.close {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}

		.spec-header {
			padding: 30rpx 20rpx;
			padding-right: 70rpx;
			align-items: flex-start;
			border: $-solid-border;
			.vip-price {
				margin: 0 24rpx;
				background-color: #FFE9BA;
				line-height: 36rpx;
				border-radius: 6rpx;
				overflow: hidden;
				.price-name {
					background-color: #101010;
					padding: 3rpx 12rpx;
					color: #FFD4B7;
					position: relative;
					overflow: hidden;
					&::after {
						content: '';
						display: block;
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						right: -15rpx;
						background-color: #FFE9BA;
						border-radius: 50%;
						top: 50%;
						transform: translateY(-50%);
						box-sizing: border-box;
					}
				}
			}
			.goods-img {
				width: 180rpx;
				height: 180rpx;
				flex: none;
			}
		}

		.spec-main {
			.spec-list {
				padding: 30rpx 20rpx;

				.spec-item {
					line-height: 52rpx;
					padding: 0 20rpx;
					background-color: #F4F4F4;
					border-radius: 60rpx;
					margin: 0 20rpx 20rpx 0;
					border: 1px solid #F4F4F4;
					
					// &.checked {
					// 	background-color: $-color-primary;
					// 	color: #fff;
					// }
					
					&.checked {
						background-color: #FFE9EB;
						color: $-color-primary;
						border-color: $-color-primary;
					}
					
					&.disabled {
						opacity: .5;
						text-decoration: line-through;
					}

				}
			}

		}
		
		// 底部按钮无法选择
		.disabled {
		    opacity: 0.4;
		}
		.btns {
			height: 120rpx;
			padding: 0 30rpx;
			margin-top: 80rpx;
		
			.add-cart {
				background-color: #FF9E1E;
			}
		
			.btn {
				margin: 0 10rpx;
				flex: 1;
			}
		}
	}
</style>
